<template>
  <q-scroll-area :thumb-style="{ opacity: 0.1 }" :verticalOffset="[12, 12]" :visible="false"
                 class="absolute-full q-py-md q-pl-md">
    <div class="row q-col-gutter-md q-pb-xs">
      <div class="col-12 row q-col-gutter-md">
        <!--        <div class="fit">-->
        <AGVStatusStatistics classes="fit"></AGVStatusStatistics>
        <!--        </div>-->
        <div v-if="false" class="col-lg-7 col-md-12 col-xs-12 col-sm-12">
          <AGVTypeDistribution v-if="false" classes="fit"></AGVTypeDistribution>
        </div>
        <div v-if="false" class="col row no-wrap">
          <RunSTATS></RunSTATS>
        </div>
      </div>
      <div class="col-12 row q-col-gutter-md">
        <div class="col-lg-7 col-md-12 col-xs-12 col-sm-12 ratio163">
          <AGVUseRatio classes="fit"></AGVUseRatio>
        </div>
        <div class="col ratio163">
          <NotificationAlarm classes="fit"></NotificationAlarm>
        </div>
      </div>
      <div class="col-12 row q-col-gutter-md">
        <div class="col-lg-6 col-md-12 col-xs-12 col-sm-12 ratio163">
          <TasksStatistics classes="fit" nonSearch></TasksStatistics>
        </div>
        <div class="col ratio163">
          <TasksStatistics classes="fit" nonSearch></TasksStatistics>
        </div>
      </div>
      <div v-if="false" class="col-12 ratio163 q-col-gutter-md">
        <div class="fit">
          <TasksStatistics classes="fit" nonSearch></TasksStatistics>
        </div>
      </div>
      <div class="col-12 row q-col-gutter-md">
        <div class="col-lg-7 col-md-12 col-xs-12 col-sm-12 ratio163">
          <AGVFault classes="fit"></AGVFault>
        </div>
        <div class="col ratio163">
          <MaintenanceTask classes="fit"></MaintenanceTask>
        </div>
      </div>
    </div>
  </q-scroll-area>
</template>
<script setup>
import AGVTypeDistribution from 'pages/Dashboard/Console/AGVTypeDistribution.vue'
import MaintenanceTask from 'pages/Dashboard/Console/MaintenanceTask.vue'
import NotificationAlarm from 'pages/Dashboard/Console/NotificationAlarm.vue'
import RunSTATS from 'pages/Dashboard/Console/RunSTATS.vue'
import AGVFault from 'src/views/AGVCore/AGVFault.vue'
import AGVStatusStatistics from 'src/views/AGVCore/AGVStatusStatistics.vue'
import AGVUseRatio from 'src/views/AGVCore/AGVUseRatio.vue'
import TasksStatistics from "src/views/TaskCore/TasksStatistics.vue"
import { userStores } from 'stores/user-stores.js'
import { onMounted } from 'vue'

const userStore = userStores()

onMounted(() => userStore.SET_BREADCRUMBS({}))
</script>
<style lang="scss" scoped>
.ratio163 {
  aspect-ratio: 16/3;
  min-height: 18.75rem;
}
</style>